<template>
	<view>
		<!-- 结算工具栏 -->
		<view class="settleBar">
			<label class="radio" @tap="radioChange">
				<radio :disabled="disabled" :checked="checked" color="#C00000" style="transform:scale(0.9)" /><text>全选</text>
			</label>
			<view class="amountView">
				<view class="title">合计:</view>
				<view class="amount">${{amount.toFixed(2)}}</view>
			</view>
			<view :class=" disabled ?  'settleCount' :'settleCount--action'   " @tap="settleClick">结算({{settleCount}})</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yg-settleBar",

		props: {

			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			//  是否选中
			checked: {
				type: Boolean,
				default: false
			},
			// 合计金额
			amount: {
				typeof: Number,
				default: 0
			},
			// 结算数量
			settleCount: {
				type: Number,
				default: 0
			}
		},

		data() {
			return {

			};
		},

		methods: {
			// 全选按钮点击事件
			radioChange() {
				this.checked = !this.checked;
				this.$emit('radioClick', this.checked);
			},
			// 结算按钮点击事件
			settleClick() {
				// 判断是否禁用
				if (this.disabled) {
					return;
				}
				//  可操作情况下, 结算数量为 0, 则不触发结算事件
				if (this.settleCount == 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					});
					return
				}
				// 触发结算事件
				this.$emit('settleClick', {
					goods_amount: this.amount,
					goods_settleCount: this.settleCount
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	/**  结算工具栏  */
	.settleBar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #333;
		height: 100rpx;
		border-top: 1px solid #eded;
		// border-bottom: 1px solid #ddd;
		// background: paleturquoise;

		position: fixed;
		right: 0;
		left: 0;
		bottom: var(--window-bottom, 0);

		.radio {
			padding-left: 20rpx;
		}

		.radio text {
			margin-left: 6rpx;
		}

		.amountView {
			display: flex;
			align-items: baseline;

			.title {
				margin-right: 10rpx;
			}

			.amount {
				color: #C00000;
			}
		}

		.settleCount {
			color: #fff;
			height: 100%;
			width: 180rpx;
			background: #C00000;
			opacity: 0.6;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.settleCount--action {
		color: #fff;
		height: 100%;
		width: 180rpx;
		background: #C00000;
		opacity: 1;

		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>